<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href="./static/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./static/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="./static/css/font-awesome.min.css" rel="stylesheet">
    <link href="./static/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="./static/plugins/blueimp/blueimp-gallery.min.css" rel="stylesheet">
    <link href="./static/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <link href="./static/css/animate.css" rel="stylesheet">
    <link href="./static/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="./static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./static/plugins/bootstrap/bootstrap.min.js"></script>
</head>
<body class="fixed-sidebar no-skin-config full-height-layout">
<div id="wrapper" v-cloak>
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span class="img-thumb"><strong class="font-bold">{{user.company}}</strong></span>
                        <a href="javascript:">
                            <span class="clear">
                                <span class="block m-t-xs"> <strong class="font-bold">{{type[user.type]}}</strong></span>
                            </span>
                        </a>
                    </div>
                </li>
                <li>
                    <a href="/home.html"><i class="fa fa-home"></i> <span class="nav-label">个人中心</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-info-circle"></i> <span class="nav-label">基本信息</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="user.html">个人信息</a></li>
                        <li><a href="verify.html">账号认证</a></li>
                        <li><a href="finance.html">财务明细</a></li>
                        <li v-if="user.is_root>0"><a href="employee.html">员工账号</a></li>
                        <li><a href="pwd.html">修改密码</a></li>
                        <li><a href="address.html">收货地址</a></li>
                    </ul>
                </li>
                <li v-if="user.type!=2" class="active">
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">询价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list.html">询价单</a></li>
                        <li class="active"><a href="enquiry.html">我要询价</a></li>
                    </ul>
                </li>
                <li v-else>
                    <a href="#"><i class="fa fa-th-large"></i> <span class="nav-label">报价</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="inquiry_list_supply.html">未报价</a></li>
                        <li><a href="offer_sheet.html">已报价</a></li>
                    </ul>
                </li>
                <li>
                    <a href="index.html"><i class="fa fa-first-order"></i> <span class="nav-label">订单管理</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="order_list.html">订单列表</a></li>

                    </ul>
                </li>
                <li>
                    <a onclick="logout()"><i class="fa fa-sign-out"></i> <span class="nav-label">退出登录</span></a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-success" href="#"><i class="fa fa-bars"></i> </a>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li class="m-r">
                        <span class="m-r-sm text-danger font-bold welcome-message" id="nav-title">{{user.name}}&nbsp;</span><span>{{user.company}}&nbsp;{{user.zone}}</span>
                    </li>
                    <li class="dropdown m-r">
                        <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" aria-expanded="false">
                            <i class="fa fa-bell"></i> <span class="label label-danger" v-if="msgbox.total">{{msgbox.total}}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts">
                            <li v-if="msgbox.daifahuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=200'">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> 您有<strong>{{msgbox.daifahuo}}</strong>个待发货订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifahuo"></li>
                            <li v-if="msgbox.daifukuan">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daifukuan}}</strong>个待付款订单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daifukuan"></li>
                            <li v-if="msgbox.daishouhuo">
                                <a href="javascript:parent.document.getElementById('main').src='order_list.html?order_status=300'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daishouhuo}}</strong>个订单待收货
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daishouhuo"></li>
                            <li v-if="msgbox.baojiazhong && user.type==1">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list.html?status=100'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.baojiazhong}}</strong>个报价中询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.baojiazhong && user.type==1"></li>
                            <li v-if="msgbox.daibaojia">
                                <a href="javascript:parent.document.getElementById('main').src='inquiry_list_supply.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.daibaojia}}</strong>个待报价询价单
                                    </div>
                                </a>
                            </li>
                            <li class="divider" v-if="msgbox.daibaojia"></li>
                            <li v-if="msgbox.weitongguo">
                                <a href="javascript:parent.document.getElementById('main').src='offer_sheet.html'">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 您有<strong>{{msgbox.weitongguo}}</strong>个报价未通过
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a onclick="logout()">
                            <i class="fa fa-sign-out"></i> 安全退出
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="row wrapper border-bottom white-bg p-h-sm">
            <div class="col-lg-10">
                <ol class="breadcrumb">
                    <li class="active">
                        <strong>我要询价</strong>
                    </li>
                </ol>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight tooltip-demo">
            <form method="get" class="form-horizontal ibox-content">
                <div class="form-group">
                    <label class="col-md-2 control-label">汽车类别：</label>
                    <div class="col-md-6">
                        <div class="radio radio-info radio-inline m-r">
                            <input type="radio" id="inlineRadio1" value="0" name="car_type" v-model="car_type">
                            <label for="inlineRadio1">小轿车</label>
                        </div>
                        <div class="radio radio-success radio-inline">
                            <input type="radio" id="inlineRadio2" value="1" name="car_type" v-model="car_type">
                            <label for="inlineRadio2">客货车</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">询价方式：</label>
                    <div class="col-md-6">
                        <div class="radio radio-info radio-inline m-r" v-if="user.type!=3">
                            <input type="radio" id="inlineRadio3" value="0" name="order_type" v-model="order_type">
                            <label for="inlineRadio3">保险询价</label>
                        </div>
                        <div class="radio radio-danger radio-inline">
                            <input type="radio" id="inlineRadio4" value="1" name="order_type" v-model="order_type">
                            <label for="inlineRadio4">自主采购</label>
                        </div>
                    </div>
                </div>
                <div v-show="order_type==0">
                    <div class="form-group">
                        <label class="col-md-2 control-label"><span class="text-danger">*</span>&nbsp;保险公司：</label>
                        <div class="col-md-2">
                            <select class="form-control" v-model="inquiry_id" @change="selectMulti('inquiry','province')">
                                <option value="0">请选择保险品牌</option>
                                <option :value="vo.id" v-for="(vo,index) in inquiry" :data-idx="index">{{vo.value}}</option>
                            </select>
                        </div>
                        <div class="col-md-2" v-show="inquiry_id>0">
                            <select class="form-control" v-model="province_id" @change="selectMulti('province','city')">
                                <option value="0">请选择省公司</option>
                                <option :value="vo.id" v-for="(vo,index) in province" :data-idx="index">{{vo.value}}</option>
                            </select>
                        </div>
                        <div class="col-md-2" v-show="province_id>0">
                            <select class="form-control" v-model="city_id" @change="selectMulti('city')">
                                <option value="0">请选择市公司</option>
                                <option :value="vo.id" v-for="(vo,index) in city" :data-idx="index">{{vo.value}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group" v-if="order_type==0 || user.type==3">
                    <label class="col-md-2 control-label">报案号：</label>
                    <div class="col-md-6"><input type="text" class="form-control" v-model="report_number" placeholder="选填"></div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <label class="col-md-2 control-label">车牌号：</label>
                    <div class="col-md-6"><input type="text" class="form-control" maxlength="7" v-model="car_number"></div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><span class="text-danger">*</span>&nbsp;车架号：</label>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="text" class="form-control" maxlength="17" placeholder="VIN码" v-model="vin_code">
                            <span class="input-group-btn"><button type="button" class="ladda-btn btn btn-primary" data-style="expand-right" id="vin_btn" @click="searchCarBrand()">搜索车型</button> </span>
                        </div>
                        <span class="help-block m-b-none">输入车架号,有助于精确匹配车型.</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">备注信息：</label>
                    <div class="col-md-6">
                        <textarea rows="3" class="form-control" v-model="remark"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><span class="text-danger">*</span>&nbsp;汽车品牌：</label>
                    <div class="col-md-4"><input type="text" class="form-control pointer" id="car-brand" readonly @click="initBrand()"></div>
                    <div class="col-md-2 img-thumb pointer" @click="initBrand()">
                        <img src="./static/image/car_brand_default.png" id="preview">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">汽车型号：</label>
                    <div class="col-md-6"><input type="text" class="form-control" v-model="car_model" placeholder="请输入汽车型号 (选填)"></div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label"><span class="text-danger">*</span>&nbsp;车辆照片：</label>
                    <div class="col-md-6">
                        <div class="img-list car-img" v-for="(vo,index) in car_images">
                            <div class="img-del">
                                <i class="fa fa-trash pointer" @click="delItem(index,'car_images')"></i>
                            </div>
                            <img :src="vo">
                        </div>
                        <div class="img-list">
                            <input type="file" multiple class="hide-input" id="imgs" title="点击上传">
                            <img src="http://image.hngpmall.com//upload/image/20190715/1563160710542909856.jpg">
                        </div>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <label class="col-md-2 control-label">询价类型：</label>
                    <div class="col-md-6">
                        <div class="radio radio-info radio-inline m-r">
                            <input type="radio" id="inlineRadio5" value="0" name="form_type" v-model="form_type">
                            <label for="inlineRadio5">自助添加零件</label>
                        </div>
                        <div class="radio radio-danger radio-inline">
                            <input type="radio" id="inlineRadio6" value="1" name="form_type" v-model="form_type">
                            <label for="inlineRadio6">上传采购单</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" v-show="form_type==0">
                    <label class="col-md-2 control-label">&nbsp;</label>
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>零件名称</th>
                                    <th>OE码</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(vo,index) in items" :data-idx="index">
                                    <td><input type="text" class="form-control input-sm part-name" v-model="vo.name"></td>
                                    <td><input type="text" class="form-control input-sm part-no" v-model="vo.oecode"></td>
                                    <td><a v-if="(index+1)!=items.length" class="btn btn-sm btn-outline btn-danger" @click="delItem(index,'items')"><i class="fa fa-times"></i></a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-group" v-show="form_type==1">
                    <label class="col-md-2 control-label"><span class="text-danger">*</span>&nbsp;询价单照片：</label>
                    <div class="col-md-6">
                        <div class="img-list car-img" v-for="(vo,index) in quoteImg">
                            <div class="img-del">
                                <i class="fa fa-trash pointer" @click="delItem(index,'quoteImg')"></i>
                            </div>
                            <img :src="vo">
                        </div>
                        <div class="img-list">
                            <input type="file" multiple class="hide-input" id="img" title="点击上传">
                            <img src="http://image.hngpmall.com//upload/image/20190715/1563160710542909856.jpg">
                        </div>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>

                <div class="form-group">
                    <div class="col-md-4 col-md-offset-2">
                        <button class="btn btn-primary btn-outline m-r-lg" type="button" @click="addItem()">添加零件</button>
                        <button class="ladda-button btn btn-primary" data-style="slide-right" type="button" @click="subForm()">发布询价单</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="modal inmodal fade" id="brand-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">选择车型</h4>
                    </div>
                    <div class="modal-body white-bg">
                        <div class="car-item" v-for="(vo,index) in brand">
                            <div class="first-char">{{vo.letter}}</div>
                            <ul>
                                <li class="pointer" v-for="(vb,idx) in vo.data" @click="selectBrand(index,idx)">
                                    <div class="flex-column">
                                        <img :src="vb.icon">
                                        <span>{{vb.brand}}</span>
                                    </div>
                                </li>
                            </ul>

                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="./static/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript" src="./static/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="./static/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/spin.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.min.js"></script>
<script type="text/javascript" src="./static/plugins/ladda/ladda.jquery.min.js"></script>
<script type="text/javascript" src="./static/js/qiniu.min.js"></script>
<script type="text/javascript" src="./static/js/slimscroll.min.js"></script>
<script type="text/javascript" src="./static/js/metisMenu.js"></script>
<script type="text/javascript" src="./static/js/inspinia.js"></script>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/main.js"></script>
<script>
    var vm = new Vue({
        el: '#wrapper',
        data: {
            user: {},
            brand: [],
            car_type: 0,
            order_type: 0,
            form_type: 0,
            carbrand_id: 0,
            car_model: '',
            report_number: '',//报案号
            car_number: '',
            remark: '',
            vin_code: '',//车架号
            token: {},//七牛token
            items: [],//自定义零件
            car_images: [],//车辆照片
            quoteImg: [],//零件照片
            inquiry_id: 0,//已选择的保险公司
            inquiry: [],//保险公司
            province_id: 0,
            province: [],
            city_id: 0,
            city: [],
            type: {"1": "修理厂", "2": "配件商", "3": "保险公司"},
            msgbox: {},
            stock: {}
        },
        methods: {
            initBrand: function () {
                $('#brand-modal').modal('show');
                $.ajax({
                    type: 'POST',
                    url: api + 'index/selectCar',
                    data: {type: vm.car_type},
                    success: function (data) {
                        checkToken(data);
                        vm.brand = data.data;
                        setTimeout(function () {
                            $('.modal-body').slimScroll({
                                height: '500px',
                                railOpacity: 0.9
                            });
                        }, 100);
                    }
                });
            },
            selectBrand: function (index, idx) {
                var brand = vm.brand[index].data[idx];
                this.carbrand_id = brand.id;
                var obj = $('#car-brand');
                vm.car_model = '';
                obj.val(brand.brand);
                obj.parent().next().find('img').attr('src', brand.icon);
                $('#brand-modal').modal('hide');
            },
            delItem: function (index, name) {
                this[name].splice(index, 1);
            },
            addItem: function (instance) {
                instance = instance ? instance : vm;
                instance.items.push({"name": "", "oecode": ""});
                setTimeout(function () {
                    $('.part-name').unbind('keyup').bind('keyup', function () {
                        var index = $(this).parents('tr').data('idx');
                        if (instance.items[index].name.length && !instance.items[index + 1]) {
                            instance.addItem();
                        }
                    });
                }, 50);
            },
            selectMulti: function (name, child) {
                var obj = $(event.currentTarget);
                var index = obj.find("option[value=" + vm[(name + '_id')] + "]").data('idx');

                if (child && index == undefined) {
                    vm[child] = [];
                    vm[(child + '_id')] = 0;
                    return;
                }
                if (child) {
                    vm[child] = vm[name][index].childs;
                    vm[child + '_id'] = 0;
                }
            },
            searchCarBrand: function () {
                if (vm.vin_code.length != 17) {
                    toastr.warning('车架号不正确');
                    return false;
                }
                var btn = $('#vin_btn').ladda().ladda('start');
                $.ajax({
                    type: 'POST',
                    url: api + 'index/vinQuery',
                    data: {vin: vm.vin_code},
                    success: function (data) {
                        btn.ladda('stop');
                        if (data.ret == 0) {
                            vm.carbrand_id = data.data.result.carbrand_id;
                            vm.car_model = data.data.result.CJMC + data.data.result.CX + data.data.result.XSMC;
                            var obj = $('#car-brand');
                            obj.val(data.data.result.PP);
                            obj.parent().next().find('img').attr('src', data.data.result.caricon);
                        } else {
                            toastr.error('车架号查询失败，请手动选择汽车品牌和车型');
                        }
                    }
                });
            },
            subForm: function () {
                var msg = '';
                if (vm.vin_code.length != 17) {
                    msg = '车辆架号不正确';
                }
                if (vm.carbrand_id < 1) {
                    msg = '请选择汽车品牌';
                }
                if (vm.car_images < 2) {
                    msg = '车辆图片至少 2 张';
                }
                if (vm.form_type > 0 && vm.quoteImg.length < 1) {
                    msg = '请上传采购清单';
                }
                if (vm.form_type == 0 && vm.items.length < 1) {
                    msg = '请填写询价表单';
                }

                if (vm.order_type == 0 && vm.city_id < 1) {
                    msg = '请选择保险公司';
                }
                if (msg) {
                    toastr.warning(msg);
                    return;
                }

                var param = {
                    car_type: vm.car_type,
                    order_type: vm.order_type,
                    form_type: vm.form_type,
                    car_number: vm.car_number,
                    vin_code: vm.vin_code,
                    remark: vm.remark,
                    carbrand_id: vm.carbrand_id,
                    car_images: vm.car_images,
                };

                if (vm.form_type == 0) {
                    if (vm.items.length < 2) {
                        toastr.warning('请填写询价零件');
                        return;
                    }
                    vm.items.splice(vm.items.length - 1, 1);
                    param.parts = vm.items;
                } else {
                    param.inquiry_images = vm.quoteImg;
                }
                if (vm.order_type == 0) {
                    param.insurer_id = vm.city_id;
                    param.report_number = vm.report_number;
                }

                if (vm.car_model == '') {
                    param.car_model = $('#car-brand').val();
                } else {
                    param.car_model = vm.car_model;
                }

                var btn = $(event.currentTarget).ladda().ladda('start');
                $.ajax({
                    type: 'POST',
                    url: api + 'insurer/inquirySubmit',
                    data: param,
                    success: function (data) {
                        if (data.ret == 0) {
                            parent.socket.send(JSON.stringify({action: 'newInquiry', wsmem: data.data.wsmem, inquiry_id: data.data.inquiry_id}));
                            if (param.order_type == 0) {
                                vm.stock = {inquiry_id: vm.inquiry_id, province_id: vm.province_id, city_id: vm.city_id};
                                setItem('insuer_inquiry' + vm.user.id, vm.stock);
                            }

                            toastr.success('您已成功提交询价', null, {
                                timeOut: 1000,
                                onHidden: function () {
                                    btn.ladda('stop');
                                    location.href = 'inquiry_list.html';
                                }
                            });
                        } else {
                            btn.ladda('stop');
                            toastr.error(data.ret);
                        }
                    },
                });
            }
        },
        created: function () {
            this.user = getItem('info');
            this.stock = getItem('insuer_inquiry' + this.user.id);
            if (typeof this.stock == 'object') {
                this.inquiry_id = this.stock.inquiry_id;
                this.province_id = this.stock.province_id;
                this.city_id = this.stock.city_id;
            }
            if (this.user.type == 3) {
                this.order_type = 1;
            }
            this.addItem(this);
            var instance = this;
            $.ajax({
                type: 'POST',
                url: api + '/index/uptoken',
                success: function (data) {
                    instance.token = data.uptoken;
                }
            });
            $.ajax({
                type: 'POST',
                url: api + '/index/insurerTree',
                success: function (data) {
                    instance.inquiry = data;
                    if (instance.inquiry_id > 0) {
                        var index = 0;
                        instance.inquiry.forEach(function (v, i) {
                            if (v.id == instance.inquiry_id) {
                                index = i;
                            }
                        });
                        instance.province = instance.inquiry[index].childs;
                        if (instance.province_id > 0) {
                            instance.province.forEach(function (val, idx) {
                                if (val.id == instance.province_id) {
                                    index = idx;
                                }
                            });
                            instance.city = instance.province[index].childs;
                        }
                    }
                }
            });
            $.ajax({
                type: 'POST',
                url: api + 'user/msgNum',
                dataType: 'json',
                success: function (data) {
                    if (data.ret == 0) {
                        instance.msgbox = data.data;
                    }
                },
            });
        },
        mounted: function () {
            var instance = this;
            $('#imgs').on('change', function () {
                var files = this.files;
                for (var i = 0; i < files.length; i++) {
                    qiniu_upload(files[i], instance.token, function (res) {
                        instance.car_images.push(cdn + res.key);
                        if (i == files.length) {
                            $('.loading-spiner').addClass('hidden');
                        }
                    });
                }
            });
            $('#img').on('change', function () {
                var files = this.files;
                for (var i = 0; i < files.length; i++) {
                    qiniu_upload(files[i], instance.token, function (res) {
                        instance.quoteImg.push(cdn + res.key);
                        if (i == files.length) {
                            $('.loading-spiner').addClass('hidden');
                        }
                    });
                }
            });
        }
    });

</script>
</body>
</html>
